<template>
  <div class="alarm-public">
    <el-row>
      <div class="row-division-18"></div>
      <div class="col col-1">
        <el-form label-width="120px" v-model="detail">
          <el-row class="alarm-detail">
            <el-col :span="24">
              <common-group-title
                title="告警详情"
                class="alarm-title"
              ></common-group-title>
            </el-col>
            <el-col :span="24" style="height: 6px"></el-col>
            <el-row>
              <el-col :span="8">
                <el-form-item label="系统标识：" prop="systemCode">
                  {{ detail.systemCode }}</el-form-item
                >
              </el-col>
              <el-col :span="8">
                <el-form-item label="规则名称：" prop="ruleName">
                  {{ detail.ruleName }}
                </el-form-item>
              </el-col>
              <!-- <el-col :span="8">
                <el-form-item label="告警子类型：" prop="alarmBusiness">
                  {{ detail.alarmBusiness }}</el-form-item
                >
              </el-col> -->
              <el-col :span="8">
                <el-form-item label="告警码：" prop="alarmCode">
                  {{ detail.alarmCode }}</el-form-item
                >
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="8">
                <el-form-item label="告警类型：" prop="alarmTypeName">
                  {{ detail.alarmTypeName }}</el-form-item
                >
              </el-col>
              <el-col :span="8">
                <el-form-item label="告警等级：" prop="alarmLevel">
                  {{
                    detail.alarmLevel === 0
                      ? "低级"
                      : detail.alarmLevel === 1
                      ? "中级"
                      : "高级"
                  }}</el-form-item
                >
              </el-col>
              <el-col :span="8">
                <el-form-item label="告警累计次数：" prop="accumulateTotal">
                  {{ detail.accumulateTotal }} 次</el-form-item
                >
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="告警时间：" prop="alarmTime">
                  {{ parseTime(new Date(detail.alarmTime)) }}</el-form-item
                >
              </el-col>
              <el-col :span="8">
                <el-form-item label="源IP：" prop="sourceIp">
                  {{ detail.sourceIp }}</el-form-item
                >
              </el-col>
              <el-col :span="8">
                <el-form-item label="目标IP：" prop="targetIp">
                  {{ detail.targetIp }}</el-form-item
                >
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="状态：" prop="status">
                  {{ detail.status | alarmStatusFilter }}</el-form-item
                >
              </el-col>
              <el-col
                :span="8"
                v-if="detail.alarmCode.substr(0, 6) === '0X0003'"
              >
                <el-form-item label="是否误报：" prop="falseAlarmStatus">
                  {{
                    detail.falseAlarmStatus === 1 ? "是" : "否"
                  }}</el-form-item
                >
              </el-col>
              <!-- <el-col :span="8">
                <el-form-item label="组织：" prop="deptId">
                  {{ detail.deptName }}</el-form-item
                >
              </el-col> -->
            </el-row>
            <el-col
              :span="24"
              style="border-top: 1px #eee solid; padding-right: 14px"
            >
              <el-form-item label="告警描述：" prop="alarmContent">
                {{ detail.alarmContent }}</el-form-item
              >
            </el-col>
          </el-row>
        </el-form>

        <el-form label-width="120px" v-model="form">
          <el-row class="alarm-detail">
            <el-col :span="24">
              <common-group-title
                title="资产信息"
                class="alarm-title"
              ></common-group-title>
            </el-col>
            <el-col :span="24" style="height: 6px"></el-col>
            <el-col :span="8">
              <el-form-item label="资产编码：" prop="assetCode">{{
                form.assetCode
              }}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="资产名称：" prop="assetName">{{
                form.assetName
              }}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="设备厂家：" prop="factoryName">{{
                form.factoryName
              }}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="资产类型名称：" prop="categoryThirdName">{{
                form.categoryThirdName
              }}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="网络区域：" prop="networkAreaName">{{
                form.networkAreaName
              }}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="业务系统：" prop="businessCodeName">{{
                form.businessCodeName
              }}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="负责人：" prop="userCode">{{
                form.userCode
              }}</el-form-item>
            </el-col>
            <!-- <el-col :span="8">
              <el-form-item label="部门：" prop="deptName">{{
                form.deptName
              }}</el-form-item>
            </el-col> -->
            <el-col :span="8">
              <el-form-item label="管理地址：" prop="managerIp">{{
                form.managerIp
              }}</el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-row>
  </div>
</template>

<script>
import { alarmInfoList, getSourceIpInfo } from "@/api/alarmCenter/index";
export default {
  name: "alarm",
  props: {
    params: {
      type: Object,
      default: () => {},
    },
    detail: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      categoryThirdCodeName: null,
      form: {
        categoryThirdName: null,
        managerIp: null,
        orgCode: null,
        userCode: null,
        businessCode: null,
        networkArea: null,
        categoryFirstCode: null,
        factory: null,
        assetName: null,
        assetCode: null,
      },
      total: 0,
      isLoading: false,
      query: {
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  methods: {
    getSourceIpInfo() {
      getSourceIpInfo({ sourceIp: this.params.targetIp }).then((res) => {
        if (res && res.code === 200) {
          this.form = res.data ? res.data : {};
        } else {
          this.form = {};
        }
      });
    },
  },
  mounted() {
    this.getSourceIpInfo();
  },
};
</script>
<style scoped lang="scss">
.alarm-public {
  width: 100%;
  height: 100%;
  background: #fff;
}
.col-1 {
  background: #fff;
  padding-left: 12px;
  padding-right: 12px;
  border-radius: 6px;
  margin-top: 25px;
  ::v-deep .el-form-item__content {
    word-break: break-all;
  }

  .alarm-detail {
    border: 1px #dcdfe6 solid;
    margin: 0 auto;
    margin-top: 25px;
    width: 75%;
    ::v-deep .el-form-item--small.el-form-item {
      margin-bottom: 6px;
      margin-top: 6px;
    }
  }
  .alarm-title {
    background: #f5f7fa;
    padding: 0 10px;
  }
}
.row-division-18 {
  height: 12px;
  width: 100%;
  background: #eee;
}
</style>
